import React, { Component } from 'react'
import '../../assets/css/search.css'
import { Toast } from 'antd-mobile';
import { getgoods, cartadd, search } from '../../request/api'
import { ee } from '../../utils/events'
import { Empty } from 'antd';
export default class cearch extends Component {
    constructor() {
        super()
        this.state = {
            list: [],
            input: '',
            show:true

        }
    }
    componentDidMount() {
        this.getlist()
        ee.on('message1', (b) => {
            // console.log(b);
            search({ keywords: b }).then(res => {
                console.log(res);
                if(res.list!=null){
                    this.setState({ list: res.list })
                }else {
                    this.state.show=false
                    this.setState({show:false})
                }
                // console.log(this.state.show);
                
            })



        })
    }
    getlist() {
        getgoods().then(res => {
            this.setState({ list: res.list })
        })
    }
    change(e) {
        this.setState({ input: e.target.value })
    }
    render() {
        return (
            <div className='search-box'>
                
                <div >
                <div className='title'>
                    <i onClick={() => this.props.history.goBack()}>&lt;</i>
               商品分类</div>
                <div className='search'>
                    <i className='iconfont icon-fangdajing'></i>
                    <span onClick={() => this.search()}>搜索</span>
                    <input type="text" value={this.state.input} onChange={(e) => this.change(e)} />
                </div>
                <Empty  description='暂无数据'  className={this.state.show?'dispalynone':''}/>
                <div  className={this.state.show?'content w':'dispalynone'}>
                    <div className="top-box">
                        <p>
                            筛选11.11大促商品
                          </p>
                    </div>
                    <ul>


                        {
                            this.state.list.map(ele => (

                                <li className='tp' key={ele.id} onClick={() => this.details(ele.id)}>
                                    <a href=""><img src={ele.img} alt="" /></a>
                                    <div className="wz">
                                        <p><a href=""> {ele.goodsname}</a></p>
                                        <p><a href=""> {ele.description}</a></p>
                                        <span>&yen;{ele.price}</span>
                                        <s>&yen;{ele.market_price}</s>
                                        <span>999人已付款</span>
                                        <p>11.11限时299元起</p>
                                        <span>999条评论</span>
                                        <span>99.9%好评</span>
                                        <div className='catr' onClick={(e) => this.catr(e, ele.id)}>加入购物车</div>
                                    </div>
                                </li>
                            ))
                        }


                    </ul>
                </div>
                </div>
                

            </div>
        )
    }
    catr(e, id) {
        e.stopPropagation()
        let uid = JSON.parse(sessionStorage.getItem('user')).uid
        let a = {
            uid,
            type: 2,
            goodsid: id,
            num: 1
        }
        cartadd(a).then(res => {
            if (res.code == 200) {
                Toast.success('添加成功', 1);
            }
        })
    }
    details(id) {
        this.props.history.push('/details/' + id)
    }
    search() {
        if (this.state.input != "") {
            let a = this.state.list.filter(ele => {
                let a = ele.goodsname.indexOf(this.state.input);
                if (a != -1) {
                    return ele
                }
            })
            console.log(a);
            if(a==[]){
                this.setState({show:false})
            }else {
                this.setState({show:true})

                this.setState({ list: a })
            }
            
        } else {
            this.getlist()
        }
    }
}
